<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-menu
          :router="true"
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff"
          @open="handleOpen"
          @close="handleClose"
        >
          <template v-for="item in menudata">
            <el-menu-item v-if="!item.children" :index="item.path">
              {{ item.label }}
            </el-menu-item>
            <el-sub-menu v-else :index="item.id">
              <template #title>
                <span>{{ item.label }}</span>
              </template>
              <el-menu-item
                v-for="sonItem in item.children"
                :index="sonItem.path"
                >{{ sonItem.label }}</el-menu-item
              >
            </el-sub-menu>
          </template>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <h1>嗨购后台管理系统</h1>
          <div class="header">
          
            <p>欢迎您：{{ username }}</p>

            <div class="pic">
              <img src="../../assets/1.jpg" alt="" />
            </div>
            <el-popconfirm
            confirm-button-text="Yes"
            cancel-button-text="No"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="亲，您舍得退出吗"
            @confirm="confirmEvent"
            @cancel="cancelEvent"
          >
            <template #reference>
              <el-button>退出登陆</el-button>
            </template>
          </el-popconfirm>
          </div>
         
          <!-- <el-popconfirm
            confirm-button-text="Yes"
            cancel-button-text="No"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="亲，您舍得退出吗"
            @confirm="confirmEvent"
            @cancel="cancelEvent"
          >
            <template #reference>
              <el-button>退出登陆</el-button>
            </template>
          </el-popconfirm> -->
        </el-header>
        <el-main>
          
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { InfoFilled } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import getMenus from "../../grants/menudata";
import { useRouter } from "vue-router";
import getRoutes, { clearCurrentRoutes } from "../../grants/router";
import { useRouteStore } from "../../piniaStore/index";
import { ElNotification } from "element-plus";

//import { useStore } from "vuex";
const $router = useRouter();
const menudata = reactive(getMenus());
const routeStore = useRouteStore();
if (!routeStore.isAddRoute) {
  getRoutes();
}
const confirmEvent = () => {
  sessionStorage.clear();
  clearCurrentRoutes(); //清除当前用户的路由配置；
  routeStore.setIsAddRoute(false);
  $router.push("/Login");
};
const cancelEvent = () => {
  console.log("cancel!");
};

// let $store = useStore();

// if (!$store.state.isAddRoute) {
//   getRoutes();
// }

const handleOpen = (key: string, keyPath: string[]) => {};
const handleClose = (key: string, keyPath: string[]) => {};
const username = ref(sessionStorage.getItem("username"));
</script>

<style scoped>
.common-layout {
  width: 100%;
  height: 100%;
}
.el-container {
  width: 100%;
  height: 100%;
}

.el-aside {
  width: 230px;
  height: 100%;
  background-color: rgb(84, 92, 100);
}

.el-header {
  width: 100%;
  height: 120px;
  background: url(../../assets/2.jpg);
}
.header {
  height: 60px;
  display: flex;
  margin-top: -82px;
  float: right;
}
.header p {
  line-height: 60px;
}
.pic {
  width: 60px;
  height: 60px;
  margin-left: 20px;
  border-radius: 50%;
}
.pic img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.el-button {
  margin-top: 16px;
margin-left: 10px;
  float: right;
}
.ElNotification {
  text-align: center;
}
h1{
  text-align: center;
  font-weight: 700;
  font-size:40px;
  margin-top: 36px;
  height: 47px;
  line-height: 47px;
}
</style>